<template lang="pug">
  .say-modal(v-if="isShowSay", :class="{'active': isShowSay}")
    .modal-head
      span 发表说一说
    .modal-body
      //- textarea(v-model="message", name="", cols="30", rows="10", :placeholder="placeholder")
      el-input(
      type="textarea",
      :rows="4",
      :placeholder="placeholder",
      v-model="message")
    .modal-foot.tac
      button.btn-sure(@click="sendSay") 确定
      button.btn-cancel(@click="closeSay") 取消
</template>

<script>
import { handleSubmitSay } from '@/utils/menu'
import { getTextLength } from '@/utils'
export default {
  data() {
    return {
      isShowSay: false,
      message: '',
      placeholder: '请输入内容（限50字以内）'
    }
  },
  mounted() {
    this.showSay()
  },
  methods: {
    showSay() {
      this.$vgo.on('sayE:show', () => {
        this.isShowSay = true
      })
    },
    sendSay() {
      if(!this.message || this.message == '') {
        this.$vgo.tip('随便写些什么吧！^~^', 'warning')
        return
      }
      // 限制100个字符 中文50个字
      if(getTextLength(this.message) > 100) {
        this.$vgo.tip('说说字数不能超过50个', 'warning')
        return
      }
      handleSubmitSay(this.message)

      this.closeSay()
    },
    closeSay() {
      this.isShowSay = false
      this.restore()
    },
    restore() {
      this.message = ''
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/color.styl'

.say-modal
  position: absolute
  top: 20%
  left: 50%
  margin-left: -275px
  width: 550px
  min-height: 220px
  height: auto
  padding: 14px 20px 20px
  box-sizing: border-box
  background-color: rgba($white, .5)
  z-index: 999
  &.active
    animation: .6s fadeInDown
  .modal-head
    padding-bottom: 13px
    span
      font-size: 18px
      color: #333
  .modal-body
    textarea
      resize: none
  .modal-foot
    margin-top: 15px
    button
      width: 60px
      height: 30px
      line-height: 30px
      margin: 0 10px
      font-size: 14px
      text-align: center
      color: $black
      border-radius: 4px
      border: none
      background-color: #fff
      &.btn-sure
        background-color: $primary
        color: $white

</style>

